<template>
  <div>
    <!--显示-->
    <audio ref="audio" class="aud">
      <source src="@assets/537.mp3">
    </audio>
    <div class="screen_show">
      <div class="power">
        <van-row justify="center" style="width: 176px">
          <van-col span="7" offset="9">{{ currentTime }}</van-col>
          <van-col span="4" offset="4">
            <power :status="chargingStatus" :level="batteryLevel"></power>
          </van-col>
        </van-row>
        <!--
                <div class="time">{{ currentTime }}</div>
                <div>🔋</div>-->
      </div>
      <van-tabs v-model:active="active" swipeable :show-header="false">
        <van-tab v-for="index in pageSize" :title="'标签 ' + index">
          <div class="wrapper">
            <div v-for="app in apps.slice(9*(index-1),9*(index-1)+9)" :key="app.key"
                 style="height: 55px;width: 50px;" @click="pageTo(app)">
              <img class="app_img"
                   :src="app.img"
                   alt="app"/>
              <div>{{ app.name }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="points">
        <van-icon v-for="item in pageSize" size="6" name="stop-circle"
                  :color="item === Number(active) + 1 ? '#FFDCE5' : '#F088B5'"/>
      </div>
      <div class="face" @click="play">
        <img class="app_img"
             alt="face"
             src="@assets/face8.png"
             style="width: 100% ; object-fit: contain;"
        />

      </div>


    </div>


  </div>


</template>
<script lang="ts" setup>
import {onMounted, onUnmounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getCurrentTime} from "@/utils/util";
import Power from "@/components/Power.vue";


const apps = ref([
  {img: "/assets/app_1.jpg", name: "カメラ", page: "", key: "0"},
  {img: "/assets/app_2.jpg", name: "カメラ", page: "", key: "1"},
  {img: "/assets/app_3.gif", name: "カメラ", page: "", key: "2"},
  {img: "/assets/app_4.jpeg", name: "カメラ", page: "", key: "3"},
  {img: "/assets/app_5.jpeg", name: "カメラ", page: "", key: "4"},
  {img: "/assets/app_6.jpg", name: "カメラ", page: "", key: "5"},
  {img: "/assets/app_7.jpg", name: "カメラ", page: "", key: "6"},
  {img: "/assets/app_8.jpg", name: "カメラ", page: "", key: "7"},
  {img: "/assets/app_9.jpg", name: "フルバム", page: "", key: "8"},
  {img: "/assets/app_10.jpeg", name: "フォバム", page: "", key: "9"},
  {img: "/assets/app_11.jpeg", name: "相机", page: "camera", key: "10"},
  {img: "/assets/app_12.jpg", name: "ォトアル", page: "", key: "11"},
])

const pageSize = ref(Math.ceil(apps.value.length / 9))

const currentTime = ref(getCurrentTime() as any);
const intervalId = ref<number>();
const updateCurrentTime = () => {
  currentTime.value = getCurrentTime();

};
onMounted(() => {
  pageSize.value = Math.ceil(apps.value.length / 9)
  // 每分钟更新一次时间
  // 初始化 currentTime
  updateCurrentTime();
  // 每分钟更新一次时间
  intervalId.value = setInterval(updateCurrentTime, 60 * 1000) as any;

  getBatteryInfo()
})
// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(intervalId.value);
});

const batteryLevel = ref<number | null>(null)
const chargingStatus = ref<string>('未知')

// 获取电池信息
const getBatteryInfo = async () => {
  const battery = await (navigator as any).getBattery()

  batteryLevel.value = battery.level * 100
  chargingStatus.value = battery.charging

  // 监听电池状态变化
  battery.addEventListener('levelchange', () => {
    batteryLevel.value = battery.level * 100
  })
  battery.addEventListener('chargingchange', () => {
    chargingStatus.value = battery.charging
  })
  console.log(batteryLevel.value)
  console.log(battery.charging)
}


const router = useRouter();

function pageTo(app: any) {
  console.log(app.page)
  router.push({path: '/' + app.page});
}

const active = ref('')


const audio = ref()

function play() {
  audio.value.play();
}
</script>

<style scoped>


.container img {
  position: relative;
}

.screen_show {
  width: 100%;
}

.power {
  display: flex;
  color: white;
  font-size: 12px !important;
  font-family: Yuanti SC, sans-serif;
  justify-content: space-between;
  background-color: #F09BBF;
}

.power div {
  font-size: 12px !important;
}

.points {
  position: absolute;
  left: 42px;
  bottom: 46px;
  width: 100px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  grid-auto-rows: minmax(10px, auto);
  margin: 2px 0px 0 5px;
}

.screen_show div {
  font-size: 8px;
  font-weight: bold;
}

.screen_show .app_img {
  width: 40px;
  height: 40px;
}

.face {
  width: 155px;
  height: 44px;
  background-color: #ffffff;
  position: absolute;
  left: 15px;
  top: 210px;
  border-radius: 10px;
}


</style>
